<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车价格</button>
    <br />
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的的名字</button>
    <hr />
    <h2>测试：{{ obj.a.b.c }}</h2>

    <button @click="changeObj">修改c</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
};
</script>

<script lang="ts" setup>
import { reactive } from "vue";
// 数据
let car = reactive({ brand: "奔驰", price: 100 });
let games = reactive([
  { id: "satr01", name: "王者荣耀" },
  { id: "satr01", name: "原神" },
  { id: "satr01", name: "三国杀" },
]);
let obj = reactive({
  a: {
    b: {
      c: 666,
    },
  },
});
// 方法
function changePrice() {
  car.price += 10;
}

function changeFirstGame() {
  games[0].name = "洛克王国";
}

function changeObj(){
  obj.a.b.c = 999
  
}
</script>


<style scoped>
.person {
  background-color: rgb(131, 74, 1);
  box-shadow: 0 010px;
  border-radius: 10px;
  padding: 20px;
}

button {
  background-color: darkseagreen;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>